<template>
  <div class="flex flex-col">
    <div class="flex-1 w-full flex flex-col" :style="{ gap: menuGap + 'px' }">
      <template v-for="menu in menuItem" :key="menu.title">
        <template v-for="(input, index) in menu.inputArray" :key="index">
          <Textarea
            v-if="input.elementType == 'Textarea'"
            class="rounded-none text-[12px] resize-none"
            v-model:value.trim="input.content"
            :placeholder="input.placeholder"
            :style="{
              'min-height': (input.height ?? menuHeight) + 'px',
              'max-height': (input.height ?? menuHeight) + 'px',
              height: (input.height ?? menuHeight) + 'px'
            }"
            :readonly="input.readonly ?? false"
            @input="(e) => handleInput(e, input, menu)"
            @click="() => handleInputClick(menu)"
            @keydown="(e) => handleInputKeydown(e, menu)"
          />
          <AInput
            v-else-if="input.elementType == 'Input'"
            class="rounded-none text-[12px]"
            v-model:value.trim="input.content"
            :placeholder="input.placeholder"
            :style="{ height: menuHeight + 'px' }"
            :readonly="input.readonly ?? false"
            @input="(e) => handleInput(e, input, menu)"
            @click="() => handleInputClick(menu)"
            @keydown="(e) => handleInputKeydown(e, menu)"
            allow-clear
          />
        </template>
      </template>
    </div>
    <div class="p-4 text-center">
      <slot name="subBtn" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import type {
  WorkflowInputProperties,
  WorkflowMenuItemProperties
} from '@main/pages/workflow/types/menu-item';
import { Textarea } from 'ant-design-vue';
import type { ChangeEvent } from 'ant-design-vue/es/_util/EventInterface';

defineProps({
  menuGap: {
    type: Number,
    default: 20
  },
  menuHeight: {
    type: Number,
    default: 32
  },
  worksNum: {
    type: Number,
    default: 1
  },
  rank: {
    type: Number,
    default: 1
  },
  menuItem: {
    type: Array as PropType<WorkflowMenuItemProperties[]>,
    required: true
  }
});

const emit = defineEmits<{
  (e: 'input-callback',  event: ChangeEvent, input: WorkflowInputProperties, menu: WorkflowMenuItemProperties): void;
  (e: 'input-click-callback', menu: WorkflowMenuItemProperties): Promise<void>;
  (
    e: 'input-keydown-callback',
    event: KeyboardEvent,
    menu: WorkflowMenuItemProperties
  ): Promise<void>;
}>();

const handleInputClick = async (menu: WorkflowMenuItemProperties) => {
  await emit('input-click-callback', menu);
};

const handleInputKeydown = async (event: KeyboardEvent, menu: WorkflowMenuItemProperties) => {
  await emit('input-keydown-callback', event, menu);
};

const handleInput = (event: ChangeEvent, input: WorkflowInputProperties, menu: WorkflowMenuItemProperties) => {
  emit('input-callback', event, input, menu);
};
</script>

<style lang="less" scoped></style>
